<template>
  <canvas ref="bjsCanvas" width="800" height="800" />
</template>

<script setup>
import {
  Engine,
  Scene,
  ArcRotateCamera,
  Vector3,
  HemisphericLight,
  SceneLoader,
  AxesViewer,
  MeshBuilder,
  StandardMaterial,
  Color3,
  CreateCylinder,
  Texture,
} from 'babylonjs'
// import { createScene } from '~/scenes/MyFirstScene'
const bjsCanvas = ref(null)

onMounted(() => {
  if (bjsCanvas.value) {
    createScene(bjsCanvas.value)
  }
})

const createScene = function (canvas) {
  const engine = new Engine(canvas)

  //这将创建一个基本的巴比伦场景对象（非网格）
  // This creates a basic Babylon Scene object (non-mesh)
  const scene = new Scene(engine)

  const camera = new ArcRotateCamera(
    'camera',
    -Math.PI / 2,
    Math.PI / 2.5,
    10,
    new Vector3(0, 0, 0)
  )
  camera.attachControl(canvas, true)
  const light = new HemisphericLight('light', new Vector3(1, 1, -3))
  const box = MeshBuilder.CreateBox(
    'box',
    {
      height: 1,
      width: 1,
      depth: 1,
    },
    scene
  )
  box.position.y = 0.5

  const roof = MeshBuilder.CreateCylinder('roof', {
    diameter: 1.3,
    height: 1.2,
    tessellation: 3,
  })
  roof.scaling.x = 0.75
  roof.rotation.z = Math.PI / 2
  roof.position.y = 1.22

  const boxMat = new StandardMaterial('boxMat')
  boxMat.diffuseTexture = new Texture('155788ef4b52588.jpg')
  box.material = boxMat

  const roofMat = new StandardMaterial('roofMat')
  roofMat.diffuseTexture = new Texture('155788ef4b52588.jpg')
  roof.material = roofMat

  const ground = MeshBuilder.CreateGround('ground', { width: 10, height: 10 })
  ground.position.y = -2
  ground.position.z = -Math.PI / 2
  ground.position.x = 0

  // 创建墙体
  var wall = MeshBuilder.CreateBox(
    'wall',
    { width: 10, height: 5, depth: 0.1 },
    scene
  )
  wall.position.z = 2
  const wallMat = new StandardMaterial('wallMat')
  wallMat.diffuseTexture = new Texture('2109242333224536.jpg')
  wall.material = wallMat
  //
  //材质
  const material = new StandardMaterial('name', scene)

  // const groundMat = new StandardMaterial('groundMat')
  // groundMat.diffuseColor = new Color3(0, 1, 0)
  // ground.material = groundMat //Place the material property of the ground
  const axis = new AxesViewer(scene, 2)
  engine.runRenderLoop(() => {
    scene.render()
  })
}
</script>
